<template>
  <!-- 头像组件 -->
  <div>
    <div class="cover-container" @click="onSelectedCover">
      <!-- v-model双向数据绑定 -->
      <el-image fit="fit" :src="value">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline" id="icons"></i>
        </div>
      </el-image>
    </div>
    <!-- dialog -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="80%" append-to-body>
      <!-- tabs -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材库" name="first">
          <!-- 复用组件 -->
          <imageList :isShow="false" isSelected ref="material"/>
        </el-tab-pane>
        <el-tab-pane label="上传图片" name="second">
          <!-- 上传接口有问题 -->
          上传接口有问题
          <el-upload class="avatar-uploader"
            action="http://toutiao.itheima.net/v1_0/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
            name="image"
            >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSelectedCoverFN">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import imageList from '@/views/image/components/list.vue'
  import {
    getToken
  } from '@/utils/token.js'
  export default {
    name: 'UploadCover',
    props: ['value','i'],
    data() {
      return {
        dialogVisible: false,
        activeName: 'first',
        imageUrl: '',
        headers: {
          Authorization: `Bearer ${getToken().token}`
        },
        resImg: ''
      }
    },
    created() {},
    mounted() {},
    methods: {
      // 点击封面组件触发的事件
      onSelectedCover() {
        this.dialogVisible = true
      },
      // 选完封面点击确定时触发的事件
      onSelectedCoverFN(){
        // 当前 tab 在素材选项时
        if(this.activeName == 'first'){
          // 访问子组件 imagelist 的属性
          const material = this.$refs.material
          if(material.selected == null){
            this.$message('请选择封面')
            return
          }
          // console.log(material)
          // 关闭封面
          this.dialogVisible = false
          // 把子组件选中的封面 url 传递给父组件预览使用
          // input 事件是 v-model,默认行为
          this.$emit('input',material.imageList[material.selected].url)
        }
      },
      // 图片上传成功的函数
      handleAvatarSuccess(res, file) {
        console.log(res, 'res')
        console.log(file, 'file')
        // 派发在线url给父组件的封面参数里面
        // this.$emit('uploadsuccess',res.data.url)
        // input 事件是 v-model,默认行为
        this.$emit('input',res.data.url)
        // 预览效果
        this.imageUrl = URL.createObjectURL(file.raw);
        // 关闭弹出层
        this.dialogVisible = false
        // 给封面的 el-img 预览模式赋值
        // this.resImg = res.data.url
      },
      // 图片上传前的拦截操作
      beforeAvatarUpload(file) {
        // 限制文件大小
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    computed: {},
    components: {
      imageList
    }
  }
</script>
<style lang="less" scope>
  .cover-container {
    width: 100px;
    height: 100px;
    border: dashed 1px #ccc;

    #icons {
      font-size: 99px;
      color: #ccc;
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
